<!--
 * @Description:
 * @Date: 2024-06-25 21:24:10
 * @LastEditTime: 2024-08-28 09:32:28
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '村情上报',
  },
}
</route>
<template>
  <view class="bg-#F6F6F6 overflow-auto w-100% min-h-100vh p-20rpx box-border overflow-auto">
    <wd-search v-model="pages.content" :light="true">
      <template #suffix>
        <view class="ml-10rpx">
          <wd-button size="medium" @click="handleSearch">查询</wd-button>
        </view>
      </template>
    </wd-search>
    <view class="mt-20rpx">
      <view
        class="bg-#fff pos-relative p-20rpx flex flex-col border-rd-10rpx mt-30rpx"
        v-for="item in VillageList"
        :key="item.id"
        @click="handleSkip(`/pages/VillageCondition/detailVC?id=${item.id}`)"
      >
        <text class="text-#888888">{{ formatTime(item.createTime, 'yyyy-MM-dd HH:mm:ss') }}</text>
        <text class="text-#000000 text-34rpx font-bold my-30rpx">
          {{ item.title }}
        </text>
        <view class="w-100% flex justify-between items-center">
          <text class="text-#888888">上报类型：{{ typeList[item.type] }}</text>
          <view
            v-if="item.status == 3 && !item.rating"
            class="bg-#F29915 py-15rpx font-bold px-40rpx text-#fff border-rd-10rpx text-30rpx"
            @click.stop="handleSkip(`/pages/VillageCondition/evaluateVC?id=${item.id}`)"
          >
            前往评价
          </view>
        </view>

        <view
          class="bg-#D3E3F4 text-#617DB0 pos-absolute top-0 right-0 py-10rpx font-bold px-30rpx text-30rpx"
        >
          {{ statusList[item.status] }}
        </view>
      </view>
      <wd-status-tip v-if="VillageList.length == 0" image="content" tip="暂无内容" />
    </view>
    <wd-loadmore v-if="VillageList.length > 0" :state="state" @reload="loadmore" />
  </view>
</template>

<script lang="ts" setup>
import { getVillagePage } from '@/service/VillageCondition/index'
import { formatTime } from '@/utils/index'
import { useUserStore } from '@/store'

const userStore = useUserStore()
const state = ref<string>('loading')
const pages = reactive({
  pageNo: 1,
  pageSize: 10,
  content: '',
})
const statusList = {
  1: '转派中',
  2: '处理中',
  3: '已办结',
}
const typeList = {
  1: '矛盾调解',
  2: '环境卫生',
  3: '治安状况',
  4: '干部作风',
  5: '农业生产',
  6: '其他',
}

const max = ref<number>(60)
const VillageList = ref([])
defineOptions({
  name: 'VillageCondition',
})
const value = ref<string>('')
const handleSkip = (url) => {
  uni.navigateTo({ url })
}
function loadmore() {
  state.value = 'loading'
  setTimeout(() => {
    getVillageList()
  }, 1000)
}
// 测试 uni API 自动引入
onLoad(() => {
  getVillageList()
})
/**
 * @description:触底回调函数
 * @return {*}
 */
onReachBottom(() => {
  if (VillageList.value.length === max.value) {
    state.value = 'finished'
  } else if (VillageList.value.length < max.value) {
    pages.pageNo += 1
    loadmore()
  }
})
function handleSearch() {
  VillageList.value = []
  getVillageList()
}
const residentId = computed(() => userStore.userInfo.residentId)
const residentType = computed(() => userStore.userInfo.type)
const gridMemberId = computed(() => userStore.userInfo.gridMemberId)
function getVillageList() {
  const creatorVo = {
    id: null,
    type: null,
  }
  if (residentType.value === 'cadre') {
    creatorVo.id = gridMemberId.value
    creatorVo.type = '1'
  } else {
    creatorVo.id = residentId.value
    creatorVo.type = '2'
  }
  getVillagePage({ ...pages }, creatorVo).then((res) => {
    VillageList.value.push(...res.data.list)
    console.log(VillageList.value, 666)
    max.value = res.data.total

    VillageList.value.length === max.value ? (state.value = 'finished') : (state.value = 'loading')
  })
}
</script>

<style>
::v-deep .wd-button {
  background: #029669 !important;
}
::v-deep .wd-search {
  padding: 0 !important;
}
</style>
